import React from 'react'

interface HeaderProps {
  currentPage: string
}

const Header: React.FC<HeaderProps> = ({ currentPage }) => {
  const getPageTitle = () => {
    switch (currentPage) {
      case 'accounts':
        return '账号管理'
      case 'tasks':
        return '任务管理'
      case 'data':
        return '数据查看'
      case 'settings':
        return '系统设置'
      default:
        return '微博爬虫客户端'
    }
  }

  const getPageDescription = () => {
    switch (currentPage) {
      case 'accounts':
        return '管理微博账号登录状态和信息'
      case 'tasks':
        return '创建和管理数据爬取任务'
      case 'data':
        return '查看和导出爬取的数据'
      case 'settings':
        return '配置系统参数和代理设置'
      default:
        return '欢迎使用微博爬虫客户端'
    }
  }

  return (
    <header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{getPageTitle()}</h1>
          <p className="text-sm text-gray-600 mt-1">{getPageDescription()}</p>
        </div>
        
        <div className="flex items-center space-x-4">
          {/* 状态指示器 */}
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
            <span className="text-sm text-gray-600">系统正常</span>
          </div>
          
          {/* 最小化、最大化、关闭按钮区域（由Electron处理） */}
          <div className="flex items-center space-x-2">
            <button className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors"></button>
            <button className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors"></button>
            <button className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors"></button>
          </div>
        </div>
      </div>
    </header>
  )
}

export default Header
